ரியாக்ட் பேட்ச்ட் அப்டேட்கள்: செயல்திறனுக்கான நிலை மாற்றங்களை மேம்படுத்துதல்

ரியாக்ட்டின் செயல்திறன் மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் இடைமுகங்களை உருவாக்குவதற்கு முக்கியமானது. செயல்திறனை மேம்படுத்த ரியாக்ட் பயன்படுத்தும் முக்கிய வழிமுறைகளில் ஒன்று பேட்ச்ட் அப்டேட்கள் ஆகும். இந்த நுட்பம் பல நிலை புதுப்பிப்புகளை ஒரே ரீ-ரெண்டர் சுழற்சியில் குழுவாக்குகிறது, இது தேவையற்ற ரீ-ரெண்டர்களின் எண்ணிக்கையை கணிசமாகக் குறைத்து, ஒட்டுமொத்த பயன்பாட்டின் பதிலளிப்பை மேம்படுத்துகிறது. இந்த கட்டுரை ரியாக்ட்டில் உள்ள பேட்ச்ட் அப்டேட்களின் நுணுக்கங்களை ஆராய்கிறது, அவை எவ்வாறு செயல்படுகின்றன, அவற்றின் நன்மைகள், வரம்புகள் மற்றும் உயர் செயல்திறன் கொண்ட ரியாக்ட் பயன்பாடுகளை உருவாக்க அவற்றை எவ்வாறு திறம்பட பயன்படுத்துவது என்பதை விளக்குகிறது.

ரியாக்ட்டின் ரெண்டரிங் செயல்முறையைப் புரிந்துகொள்ளுதல்

பேட்ச்ட் அப்டேட்களைப் பற்றி தெரிந்துகொள்வதற்கு முன், ரியாக்ட்டின் ரெண்டரிங் செயல்முறையைப் புரிந்துகொள்வது அவசியம். ஒரு காம்போனென்ட்டின் நிலை மாறும்போதெல்லாம், பயனர் இடைமுகத்தில் புதிய நிலையைப் பிரதிபலிக்க ரியாக்ட் அந்த காம்போனென்ட்டையும் அதன் குழந்தைகளையும் மீண்டும் ரெண்டர் செய்ய வேண்டும். இந்த செயல்முறை பின்வரும் படிகளை உள்ளடக்கியது:

1. நிலை புதுப்பிப்பு: ஒரு காம்போனென்ட்டின் நிலை setState முறை (அல்லது useState போன்ற ஹூக்) மூலம் புதுப்பிக்கப்படுகிறது.
2. சமரசம் (Reconciliation): ரியாக்ட் புதிய விர்ச்சுவல் DOM-ஐ முந்தையதுடன் ஒப்பிட்டு வேறுபாடுகளை ("diff") கண்டறிகிறது.
3. செயல்படுத்துதல் (Commit): கண்டறியப்பட்ட வேறுபாடுகளின் அடிப்படையில் ரியாக்ட் உண்மையான DOM-ஐ புதுப்பிக்கிறது. இங்குதான் மாற்றங்கள் பயனருக்குத் தெரியும்.

ரீ-ரெண்டரிங் என்பது கணக்கீட்டு ரீதியாக செலவாகும் ஒரு செயல்முறையாகும், குறிப்பாக ஆழமான காம்போனென்ட் மரங்களைக் கொண்ட சிக்கலான காம்போனென்ட்களுக்கு. அடிக்கடி ரீ-ரெண்டர் செய்வது செயல்திறன் சிக்கல்களுக்கும் மந்தமான பயனர் அனுபவத்திற்கும் வழிவகுக்கும்.

பேட்ச்ட் அப்டேட்கள் என்றால் என்ன?

பேட்ச்ட் அப்டேட்கள் என்பது ஒரு செயல்திறன் மேம்படுத்தல் நுட்பமாகும், இதில் ரியாக்ட் பல நிலை புதுப்பிப்புகளை ஒரே ரீ-ரெண்டர் சுழற்சியில் குழுவாக்குகிறது. ஒவ்வொரு தனிப்பட்ட நிலை மாற்றத்திற்குப் பிறகும் காம்போனென்ட்டை ரீ-ரெண்டர் செய்வதற்குப் பதிலாக, ஒரு குறிப்பிட்ட வரம்பிற்குள் உள்ள அனைத்து நிலை புதுப்பிப்புகளும் முடியும் வரை ரியாக்ட் காத்திருந்து, பின்னர் ஒரே ஒரு ரீ-ரெண்டரைச் செய்கிறது. இது DOM புதுப்பிக்கப்படும் எண்ணிக்கையை கணிசமாகக் குறைக்கிறது, இது மேம்பட்ட செயல்திறனுக்கு வழிவகுக்கிறது.

பேட்ச்ட் அப்டேட்கள் எவ்வாறு செயல்படுகின்றன

ரியாக்ட் அதன் கட்டுப்படுத்தப்பட்ட சூழலில் நிகழும் நிலை புதுப்பிப்புகளை தானாகவே பேட்ச் செய்கிறது, அவை:

• நிகழ்வு கையாளர்கள் (Event handlers): onClick, onChange மற்றும் onSubmit போன்ற நிகழ்வு கையாளர்களுக்குள் உள்ள நிலை புதுப்பிப்புகள் பேட்ச் செய்யப்படுகின்றன.
• ரியாக்ட் வாழ்க்கைச் சுழற்சி முறைகள் (கிளாஸ் காம்போனென்ட்கள்): componentDidMount மற்றும் componentDidUpdate போன்ற வாழ்க்கைச் சுழற்சி முறைகளுக்குள் உள்ள நிலை புதுப்பிப்புகளும் பேட்ச் செய்யப்படுகின்றன.
• ரியாக்ட் ஹூக்ஸ்: useState அல்லது நிகழ்வு கையாளர்களால் தூண்டப்பட்ட தனிப்பயன் ஹூக்குகள் வழியாக செய்யப்படும் நிலை புதுப்பிப்புகள் பேட்ச் செய்யப்படுகின்றன.

இந்த சூழல்களில் பல நிலை புதுப்பிப்புகள் நிகழும்போது, ரியாக்ட் அவற்றை வரிசைப்படுத்தி, பின்னர் நிகழ்வு கையாளி அல்லது வாழ்க்கைச் சுழற்சி முறை முடிந்ததும் ஒரே ஒரு சமரசம் மற்றும் செயல்படுத்தும் கட்டத்தைச் செய்கிறது.

உதாரணம்:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default Counter;

இந்த எடுத்துக்காட்டில், 'Increment' பொத்தானைக் கிளிக் செய்வது handleClick செயல்பாட்டைத் தூண்டுகிறது, இது setCount ஐ மூன்று முறை அழைக்கிறது. ரியாக்ட் இந்த மூன்று நிலை புதுப்பிப்புகளையும் ஒரே புதுப்பிப்பாக பேட்ச் செய்யும். இதன் விளைவாக, காம்போனென்ட் ஒரு முறை மட்டுமே ரீ-ரெண்டர் செய்யும், மேலும் ஒவ்வொரு setCount அழைப்பிற்கும் 1 ஆக இல்லாமல், count 3 ஆக அதிகரிக்கும். ரியாக்ட் புதுப்பிப்புகளை பேட்ச் செய்யவில்லை என்றால், காம்போனென்ட் மூன்று முறை ரீ-ரெண்டர் செய்யும், இது குறைவான செயல்திறன் கொண்டது.

பேட்ச்ட் அப்டேட்களின் நன்மைகள்

பேட்ச்ட் அப்டேட்களின் முதன்மை நன்மை, ரீ-ரெண்டர்களின் எண்ணிக்கையைக் குறைப்பதன் மூலம் செயல்திறனை மேம்படுத்துவதாகும். இது பின்வருவனவற்றிற்கு வழிவகுக்கிறது:

• வேகமான UI புதுப்பிப்புகள்: குறைக்கப்பட்ட ரீ-ரெண்டர்கள் பயனர் இடைமுகத்திற்கு விரைவான புதுப்பிப்புகளை விளைவிக்கின்றன, இதனால் பயன்பாடு மிகவும் பதிலளிக்கக்கூடியதாகிறது.
• குறைக்கப்பட்ட DOM கையாளுதல்கள்: குறைவான DOM புதுப்பிப்புகள் உலாவியில் குறைவான வேலைக்கு வழிவகுக்கிறது, இது சிறந்த செயல்திறன் மற்றும் குறைந்த வள நுகர்வுக்கு வழிவகுக்கிறது.
• ஒட்டுமொத்த பயன்பாட்டு செயல்திறன் மேம்பாடு: பேட்ச்ட் அப்டேட்கள் மென்மையான மற்றும் திறமையான பயனர் அனுபவத்திற்கு பங்களிக்கின்றன, குறிப்பாக அடிக்கடி நிலை மாற்றங்களைக் கொண்ட சிக்கலான பயன்பாடுகளில்.

பேட்ச்ட் அப்டேட்கள் பொருந்தாதபோது

பல சூழ்நிலைகளில் ரியாக்ட் தானாகவே புதுப்பிப்புகளை பேட்ச் செய்தாலும், பேட்ச்சிங் நிகழாத சில சூழ்நிலைகள் உள்ளன:

• ஒத்திசைவற்ற செயல்பாடுகள் (ரியாக்ட்டின் கட்டுப்பாட்டிற்கு வெளியே): setTimeout, setInterval அல்லது ப்ராமிஸ்கள் போன்ற ஒத்திசைவற்ற செயல்பாடுகளுக்குள் செய்யப்படும் நிலை புதுப்பிப்புகள் பொதுவாக தானாகவே பேட்ச் செய்யப்படுவதில்லை. ஏனெனில் இந்த செயல்பாடுகளின் செயல்படுத்தும் சூழலில் ரியாக்ட்டிற்கு கட்டுப்பாடு இல்லை.
• நேட்டிவ் நிகழ்வு கையாளர்கள்: நீங்கள் நேட்டிவ் நிகழ்வு கேட்பான்களைப் பயன்படுத்தினால் (எ.கா., addEventListener ஐப் பயன்படுத்தி DOM கூறுகளுடன் நேரடியாக கேட்பான்களை இணைத்தல்), அந்த கையாளர்களுக்குள் உள்ள நிலை புதுப்பிப்புகள் பேட்ச் செய்யப்படாது.

உதாரணம் (ஒத்திசைவற்ற செயல்பாடு):

import React, { useState } from 'react';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1);
      setCount(count + 1);
    }, 0);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default DelayedCounter;

இந்த எடுத்துக்காட்டில், setCount மூன்று முறை தொடர்ச்சியாக அழைக்கப்பட்டாலும், அவை setTimeout கால்பேக்கிற்குள் உள்ளன. இதன் விளைவாக, ரியாக்ட் இந்த புதுப்பிப்புகளை *செய்யாது*, மேலும் காம்போனென்ட் மூன்று முறை ரீ-ரெண்டர் செய்யும், ஒவ்வொரு ரீ-ரெண்டரிலும் எண்ணிக்கையை 1 ஆக அதிகரிக்கும். உங்கள் காம்போனென்ட்களை சரியாக மேம்படுத்துவதற்கு இந்த நடத்தையைப் புரிந்துகொள்வது முக்கியம்.

`unstable_batchedUpdates` உடன் பேட்ச் அப்டேட்களை கட்டாயப்படுத்துதல்

ரியாக்ட் தானாகவே புதுப்பிப்புகளை பேட்ச் செய்யாத சூழ்நிலைகளில், பேட்ச்சிங்கை கட்டாயப்படுத்த நீங்கள் react-dom இலிருந்து unstable_batchedUpdates ஐப் பயன்படுத்தலாம். இந்த செயல்பாடு பல நிலை புதுப்பிப்புகளை ஒரே பேட்ச்சில் இணைக்க உங்களை அனுமதிக்கிறது, அவை ஒரே ரீ-ரெண்டர் சுழற்சியில் ஒன்றாக செயல்படுத்தப்படுவதை உறுதி செய்கிறது.

குறிப்பு: unstable_batchedUpdates API நிலையற்றதாகக் கருதப்படுகிறது மற்றும் எதிர்கால ரியாக்ட் பதிப்புகளில் மாறலாம். இதை எச்சரிக்கையுடன் பயன்படுத்தவும், தேவைப்பட்டால் உங்கள் குறியீட்டை சரிசெய்ய தயாராக இருங்கள். இருப்பினும், பேட்ச்சிங் நடத்தையை வெளிப்படையாகக் கட்டுப்படுத்த இது ஒரு பயனுள்ள கருவியாக உள்ளது.

உதாரணம் (`unstable_batchedUpdates` ஐப் பயன்படுத்துதல்):

import React, { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      unstable_batchedUpdates(() => {
        setCount(count + 1);
        setCount(count + 1);
        setCount(count + 1);
      });
    }, 0);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default DelayedCounter;

இந்த மாற்றியமைக்கப்பட்ட எடுத்துக்காட்டில், setTimeout கால்பேக்கிற்குள் உள்ள மூன்று setCount அழைப்புகளை இணைக்க unstable_batchedUpdates பயன்படுத்தப்படுகிறது. இது ரியாக்ட்டை இந்த புதுப்பிப்புகளை பேட்ச் செய்யும்படி கட்டாயப்படுத்துகிறது, இதன் விளைவாக ஒரே ஒரு ரீ-ரெண்டர் ஏற்பட்டு, எண்ணிக்கை 3 ஆக அதிகரிக்கிறது.

ரியாக்ட் 18 மற்றும் தானியங்கி பேட்ச்சிங்

ரியாக்ட் 18 பல சூழ்நிலைகளுக்கு தானியங்கி பேட்ச்சிங்கை அறிமுகப்படுத்தியது. இதன் பொருள், டைம்அவுட்கள், ப்ராமிஸ்கள், நேட்டிவ் நிகழ்வு கையாளர்கள் அல்லது வேறு எந்த நிகழ்வுக்குள்ளும் நிலை புதுப்பிப்புகள் நிகழும்போது கூட ரியாக்ட் தானாகவே அவற்றை பேட்ச் செய்யும். இது செயல்திறன் மேம்படுத்தலை பெரிதும் எளிதாக்குகிறது மற்றும் unstable_batchedUpdates ஐ கைமுறையாகப் பயன்படுத்த வேண்டிய தேவையைக் குறைக்கிறது.

உதாரணம் (ரியாக்ட் 18 தானியங்கி பேட்ச்சிங்):

import React, { useState } from 'react';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1);
      setCount(count + 1);
    }, 0);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default DelayedCounter;

ரியாக்ட் 18 இல், மேலே உள்ள எடுத்துக்காட்டு setTimeout க்குள் இருந்தாலும், setCount அழைப்புகளை தானாகவே பேட்ச் செய்யும். இது ரியாக்ட்டின் செயல்திறன் மேம்படுத்தல் திறன்களில் ஒரு குறிப்பிடத்தக்க முன்னேற்றமாகும்.

பேட்ச்ட் அப்டேட்களைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

பேட்ச்ட் அப்டேட்களை திறம்படப் பயன்படுத்தவும் உங்கள் ரியாக்ட் பயன்பாடுகளை மேம்படுத்தவும், பின்வரும் சிறந்த நடைமுறைகளைக் கருத்தில் கொள்ளுங்கள்:

• தொடர்புடைய நிலை புதுப்பிப்புகளை குழுவாக்குங்கள்: முடிந்தவரை, பேட்ச்சிங்கின் நன்மைகளை அதிகரிக்க, ஒரே நிகழ்வு கையாளி அல்லது வாழ்க்கைச் சுழற்சி முறைக்குள் தொடர்புடைய நிலை புதுப்பிப்புகளை குழுவாக்குங்கள்.
• தேவையற்ற நிலை புதுப்பிப்புகளைத் தவிர்க்கவும்: உங்கள் காம்போனென்ட்டின் நிலையை கவனமாக வடிவமைப்பதன் மூலமும், பயனர் இடைமுகத்தைப் பாதிக்காத தேவையற்ற புதுப்பிப்புகளைத் தவிர்ப்பதன் மூலமும் நிலை புதுப்பிப்புகளின் எண்ணிக்கையைக் குறைக்கவும். ப்ராப்ஸ் மாறாத காம்போனென்ட்களின் ரீ-ரெண்டர்களைத் தடுக்க மெமோயிசேஷன் (எ.கா., React.memo) போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
• செயல்பாட்டு புதுப்பிப்புகளைப் பயன்படுத்தவும்: முந்தைய நிலையின் அடிப்படையில் நிலையைப் புதுப்பிக்கும்போது, செயல்பாட்டு புதுப்பிப்புகளைப் பயன்படுத்தவும். புதுப்பிப்புகள் பேட்ச் செய்யப்படும்போதும், நீங்கள் சரியான நிலை மதிப்புடன் பணிபுரிவதை இது உறுதி செய்கிறது. செயல்பாட்டு புதுப்பிப்புகள் setState (அல்லது useState செட்டர்) க்கு ஒரு செயல்பாட்டை அனுப்புகின்றன, இது முந்தைய நிலையை ஒரு வாதமாகப் பெறுகிறது.
• ஒத்திசைவற்ற செயல்பாடுகளைப் பற்றி கவனமாக இருங்கள்: ரியாக்ட்டின் பழைய பதிப்புகளில் (18 க்கு முன்), ஒத்திசைவற்ற செயல்பாடுகளுக்குள் உள்ள நிலை புதுப்பிப்புகள் தானாகவே பேட்ச் செய்யப்படாது என்பதை அறிந்து கொள்ளுங்கள். தேவைப்படும்போது பேட்ச்சிங்கை கட்டாயப்படுத்த unstable_batchedUpdates ஐப் பயன்படுத்தவும். இருப்பினும், புதிய திட்டங்களுக்கு, தானியங்கி பேட்ச்சிங்கின் நன்மைகளைப் பெற ரியாக்ட் 18 க்கு மேம்படுத்துவது மிகவும் பரிந்துரைக்கப்படுகிறது.
• நிகழ்வு கையாளர்களை மேம்படுத்துங்கள்: ரெண்டரிங் செயல்முறையை மெதுவாக்கக்கூடிய தேவையற்ற கணக்கீடுகள் அல்லது DOM கையாளுதல்களைத் தவிர்க்க உங்கள் நிகழ்வு கையாளர்களுக்குள் உள்ள குறியீட்டை மேம்படுத்துங்கள்.
• உங்கள் பயன்பாட்டை சுயவிவரப்படுத்துங்கள்: செயல்திறன் சிக்கல்கள் மற்றும் பேட்ச்ட் அப்டேட்கள் மேலும் மேம்படுத்தக்கூடிய பகுதிகளை அடையாளம் காண ரியாக்ட்டின் சுயவிவரக் கருவிகளைப் பயன்படுத்தவும். ரியாக்ட் டெவ் டூல்ஸ் செயல்திறன் தாவல், ரீ-ரெண்டர்களைக் காட்சிப்படுத்தவும் மேம்பாட்டிற்கான வாய்ப்புகளை அடையாளம் காணவும் உதவும்.

உதாரணம் (செயல்பாட்டு புதுப்பிப்புகள்):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
}

export default Counter;

இந்த எடுத்துக்காட்டில், முந்தைய மதிப்பின் அடிப்படையில் count ஐ அதிகரிக்க செயல்பாட்டு புதுப்பிப்புகள் பயன்படுத்தப்படுகின்றன. புதுப்பிப்புகள் பேட்ச் செய்யப்படும்போதும் count சரியாக அதிகரிக்கப்படுவதை இது உறுதி செய்கிறது.

முடிவுரை

ரியாக்ட்டின் பேட்ச்ட் அப்டேட்கள் தேவையற்ற ரீ-ரெண்டர்களைக் குறைப்பதன் மூலம் செயல்திறனை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த வழிமுறையாகும். பேட்ச்ட் அப்டேட்கள் எவ்வாறு செயல்படுகின்றன, அவற்றின் வரம்புகள் மற்றும் அவற்றை எவ்வாறு திறம்படப் பயன்படுத்துவது என்பதைப் புரிந்துகொள்வது உயர் செயல்திறன் கொண்ட ரியாக்ட் பயன்பாடுகளை உருவாக்குவதற்கு முக்கியமானது. இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலம், உங்கள் ரியாக்ட் பயன்பாடுகளின் பதிலளிப்பு மற்றும் ஒட்டுமொத்த பயனர் அனுபவத்தை நீங்கள் கணிசமாக மேம்படுத்தலாம். ரியாக்ட் 18 தானியங்கி பேட்ச்சிங்கை அறிமுகப்படுத்துவதன் மூலம், நிலை மாற்றங்களை மேம்படுத்துவது இன்னும் எளிமையாகவும் திறமையாகவும் ஆகிறது, இது டெவலப்பர்களை அற்புதமான பயனர் இடைமுகங்களை உருவாக்குவதில் கவனம் செலுத்த அனுமதிக்கிறது.